<template>
    <div class="publicpageview">
        <div class="publicformview">
            <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="统计单位：" prop="assessmentDate">
                            <el-input v-model="listQuery.assessmentDate"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="统计年月：" prop="assessmentDate">
                            <el-date-picker v-model="listQuery.assessmentDate" type="date" placeholder="年/月/日">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>


                    <el-col :span="4">
                        <div style="padding-left: 90px;">
                            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                            <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="publitableview">
            <el-button type="primary" size="mini" @click="handleAddUser('add')">统计录入</el-button>


            <div
                style="width: 100%; text-align: center; font-weight: bold;font-size: 16px; color: #333333;margin: 20px 0;">
                碎修考核情况统计表（公产）
            </div>
            <el-table :data="list" border fit highlight-current-row size="mini">

                <el-table-column>
                    <template slot="header" slot-scope="scope">
                        <span>单位： </span>
                        <span style="margin-left: 500px;">时间： </span>
                    </template>
                    <el-table-column label="单位" align="center" prop="districtName">

                    </el-table-column>
                    <el-table-column label="本月任务单合" align="center" prop="totalTaskMonth">

                    </el-table-column>

                    <el-table-column label="任务单分项目" align="center">
                        <el-table-column label="木工" align="center" prop="workCarpentry">

                        </el-table-column>
                        <el-table-column label="瓦工" align="center" prop="workBricklayer">

                        </el-table-column>
                        <el-table-column label="水暖" align="center" prop="workPlumbing">

                        </el-table-column>
                        <el-table-column label="电工" align="center" prop="workElectrician">

                        </el-table-column>
                        <el-table-column label="其它" align="center" prop="workOther">

                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="考核员考核情况" align="center">
                        <el-table-column label="单数" align="center" prop="assessorCount">

                        </el-table-column>
                        <el-table-column label="考核面" align="center" prop="assessorSurface">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="工长考核情况" align="center">
                        <el-table-column label="单数" align="center" prop="foremanCount">
                        </el-table-column>
                        <el-table-column label="考核面" align="center" prop="foremanSurface">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="站长考核情况" align="center">
                        <el-table-column label="单数" align="center" prop="chiefEngineerCount">
                        </el-table-column>
                        <el-table-column label="考核面" align="center" prop="chiefEngineerSurface">
                        </el-table-column>
                    </el-table-column>


                    <el-table-column label="住户满意情况" align="center">
                        <el-table-column label="单数" align="center" prop="residentLevelCount">
                        </el-table-column>
                        <el-table-column label="百分比" align="center" prop="residentLevelPercentage">
                        </el-table-column>
                    </el-table-column>


                    <el-table-column label="收回任务单情况" align="center">
                        <el-table-column label="单数" align="center" prop="retrieveTaskCount">
                        </el-table-column>
                        <el-table-column label="百分比" align="center" prop="retrieveTaskPercentage">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="未收回任务单情况" align="center">
                        <el-table-column label="单数" align="center" prop="unrecollectedTasks">
                        </el-table-column>
                        <el-table-column label="百分比" align="center" prop="unrecollectedTasksPercentage">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>

                <el-table-column align="center" label="操作" width="280" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'shangbao')"
                            v-if="scope.row.reportStatus == 0 || scope.row.reportStatus == -1">统计上报</el-button>

                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'tuihui')"
                            v-if="scope.row.reportStatus == 1">统计退回</el-button>

                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
                        <el-button type="text" size="mini" @click="handleUpdate(scope.row,'details')">详情</el-button>
                        <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="publicpaginationview">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    small></el-pagination>
            </div>
        </div>

        <el-dialog :title="isAdd == 'add' ? '统计录入' : isAdd == 'update' ? '统计修改' : '统计详情'" :visible.sync="dialogVisible"
            width="60%" :before-close="handleClose">
            <el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" size="mini"
                :inline="true">

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="区房屋管理单位：" prop="districtId">
                            <el-select v-model="formData.districtId" @change="handleFormQuchange">
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="管理部(分中心)：" prop="houseAdminId">
                            <el-select v-model="formData.houseAdminId">
                                <el-option v-for="item in houseFormAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="考核年月：" prop="assessmentDate">
                            <el-date-picker v-model="formData.assessmentDate" type="month" placeholder="年/月/日">
                            </el-date-picker>

                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="本月任务单合计：" prop="totalTaskMonth">
                            <el-input v-model="formData.totalTaskMonth"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="background: #F7F7F7;">

                    <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px;">
                        <span style="font-weight: bold;font-size: 16px;color: #008C93;">任务单分组分项：</span>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="木工：" prop="workCarpentry">
                            <el-input v-model="formData.workCarpentry"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="瓦工" prop="workBricklayer">
                            <el-input v-model="formData.workBricklayer"></el-input>

                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="水暖：" prop="workPlumbing">
                            <el-input v-model="formData.workPlumbing"></el-input>

                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="电工：" prop="workElectrician">
                            <el-input v-model="formData.workElectrician"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="其它：" prop="workOther">
                            <el-input v-model="formData.workOther"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div style="display: flex; margin-top: 5px;justify-content: space-between;">
                    <el-row :gutter="20" style="background: #F7F7F7;width: 50%;">
                        <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px;">
                            <span style="font-weight: bold;font-size: 16px;color: #008C93;">考核员考核情况分组：</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单数：" prop="assessorCount">
                                <el-input v-model="formData.assessorCount"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="考核面：" prop="assessorSurface">
                                <el-input v-model="formData.assessorSurface"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="background: #F7F7F7;width: 51%;">
                        <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px;">
                            <span style="font-weight: bold;font-size: 16px;color: #008C93;">工长考核情况分组：</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单数：" prop="foremanCount">
                                <el-input v-model="formData.foremanCount"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="考核面：" prop="foremanSurface">
                                <el-input v-model="formData.foremanSurface"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>


                <div style="display: flex; margin-top: 5px;justify-content: space-between;">
                    <el-row :gutter="20" style="background: #F7F7F7;width: 50%;">
                        <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px;">
                            <span style="font-weight: bold;font-size: 16px;color: #008C93;">工站长考核情况分组：</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单数：" prop="chiefEngineerCount">
                                <el-input v-model="formData.chiefEngineerCount"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="考核面：" prop="chiefEngineerSurface">
                                <el-input v-model="formData.chiefEngineerSurface"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="background: #F7F7F7;width: 51%;">
                        <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px;">
                            <span style="font-weight: bold;font-size: 16px;color: #008C93;">住户满意程度分组：</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单数：" prop="residentLevelCount">
                                <el-input v-model="formData.residentLevelCount"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="百分比：" prop="residentLevelPercentage">
                                <el-input v-model="formData.residentLevelPercentage"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>



                <div style="display: flex; margin-top: 5px;justify-content: space-between;">
                    <el-row :gutter="20" style="background: #F7F7F7;width: 50%;">
                        <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px;">
                            <span style="font-weight: bold;font-size: 16px;color: #008C93;">收回任务单情况分组：</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单数：" prop="retrieveTaskCount">
                                <el-input v-model="formData.retrieveTaskCount"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="百分比" prop="retrieveTaskPercentage">
                                <el-input v-model="formData.retrieveTaskPercentage"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="background: #F7F7F7;width: 51%;">
                        <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px;">
                            <span style="font-weight: bold;font-size: 16px;color: #008C93;">未收回任务单情况分组：</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单数：" prop="unrecollectedTasks">
                                <el-input v-model="formData.unrecollectedTasks"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="百分比：" prop="unrecollectedTasksPercentage">
                                <el-input v-model="formData.unrecollectedTasksPercentage"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>


            </el-form>

            <span slot="footer" class="dialog-footer">

                <el-button type="primary" @click="handleshangbao" size="medium"
                    v-if="isAdd == 'shangbao'">确认上报</el-button>
                <el-button type="primary" @click="handleshangbao" size="medium"
                    v-if="isAdd == 'tuihui'">确认退回</el-button>
                <el-button type="primary" @click="handleClose" size="medium"
                    v-if="isAdd == 'details' || isAdd == 'shangbao' || isAdd == 'tuihui'">返
                    回</el-button>

                <el-button type="primary" @click="handleSave" size="medium" v-else>保 存</el-button>
            </span>
        </el-dialog>



    </div>
</template>

<script>

import { listBrokenRepairOrderStatistics, createBrokenRepairOrderStatistics, updateBrokenRepairOrderStatistics, reportBrokenRepairOrderStatistics, deleteBrokenRepairOrderStatistics } from '@/api/repair'
import { getArea, getHouseAdmin, getBlockGroup, getBlockByGroup, upload } from '@/api/common'
import { Message } from 'element-ui'
import moment from 'moment';
export default {
    name: "AccommodationManagementIndex",

    data() {
        return {
            listQuery: {
                pageNum: 1,
                pageSize: 20,
                assessmentDate: ""
            },
            total: 0,

            list: [

            ],
            dialogVisible: false,
            isAdd: 'add',
            formData: {
                districtId: "",
                houseAdminId: "",
                assessmentDate: "",
                totalTaskMonth: "",
                workCarpentry: "",
                workBricklayer: "",
                workPlumbing: "",
                workElectrician: "",
                workOther: "",
                assessorCount: "",
                assessorSurface: "",
                foremanCount: "",
                foremanSurface: "",
                chiefEngineerCount: "",
                chiefEngineerSurface: "",
                residentLevelCount: "",
                residentLevelPercentage: "",
                retrieveTaskCount: "",
                retrieveTaskPercentage: "",
                unrecollectedTasks: "",
                unrecollectedTasksPercentage: ""
            },
            areaList: [],

            houseFormAdminList: [],

        };
    },

    computed: {

    },

    mounted() {
        this.getList();
        this.getCommon();
    },

    methods: {
        getCommon() {
            getArea().then(res => {
                this.areaList = res.data
            })
        },
        handleFormQuchange(val) {
            this.formData.houseAdminId = null;

            if (val) {
                this.getFormHouseAdmin(val);

            } else {
                this.houseFormAdminList = [];
            }
        },
        getFormHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseFormAdminList = res.data.list;
            })
        },
        handleSearch() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        getList() {

            listBrokenRepairOrderStatistics(this.listQuery).then((response) => {
                this.total = response.data.total;
                this.list = response.data.list;

            });
        },

        resetForm(val) {

            this.$refs[val].resetFields();
        },

        handleAddUser(type) {
            this.isAdd = 'add';
            this.dialogVisible = true;
        },

        handleClose() {
            this.resetForm("dataForm");
            this.dialogVisible = false;

        },



        handleUpdate(currentData, type) {
            this.isAdd = type;
            //   一定要在打开弹窗前 再赋值 不然resetFiles没用
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.formData = { ...currentData };
            });
        },

        handleBantuo(currentData) {

        },

        handleSave() {
            if (this.isAdd == 'add') {
                createBrokenRepairOrderStatistics({ ...this.formData }).then(res => {
                    this.handleClose();
                    this.getList();
                    this.$message.success("操作成功")
                })
            }

            if (this.isAdd == 'update') {
                updateBrokenRepairOrderStatistics({ ...this.formData }).then(res => {
                    this.handleClose();
                    this.getList();
                    this.$message.success("操作成功")
                })
            }
        },

        handleshangbao() {
            reportBrokenRepairOrderStatistics(this.formData.id).then(res => {
                this.handleClose();
                this.getList();
                this.$message.success("操作成功")
            })
        },

        handleDelete(id) {
            this.$confirm(
                "此操作将删除该条内容，请确认是否继续操作？",
                "删除提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    deleteBrokenRepairOrderStatistics(id).then(res => {
                        this.getList();
                        this.$message.success("操作成功")
                    })
                })
                .catch(() => { });
        }
    },
};
</script>

<style scoped>
.el-date-editor.el-input {
    width: 100%;
    cursor: pointer;
}

::v-deep .el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: none !important;
}

::v-deep .el-upload--picture-card {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
}

::v-deep .el-upload--picture-card:hover,
.el-upload:focus {
    border-color: #008C93;
    color: #008C93;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
}
</style>